<template>
  <div>
    <div class="second">
      <el-form :inline="true" :border="true" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input
            v-model="user"
            placeholder="请输入用户名称进行查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="user"
            placeholder="请输入用户邮箱进行查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary " @click="select()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="insert()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :border="true" row-key="id" :data="tableData" style="width: 100%">
      <el-table-column label="编号" prop="id"> </el-table-column>
      <el-table-column label="出生日期" prop="birthday"> </el-table-column>
      <el-table-column label="性别" prop="gender"> </el-table-column>
      <el-table-column label="用户名" prop="username"> </el-table-column>
      <el-table-column label="邮件" prop="email"> </el-table-column>

      <el-table-column label="状态" prop="state"> </el-table-column>
      <el-table-column label="详情" prop="details"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
          >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-left: 70%">
      <el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="添加用户"
      :visible.sync="dialogFormVisible"
      width="40%"
      height="40%"
    >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            width="150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.radio" label="1">备选项</el-radio>
            <el-radio v-model="form.radio" label="2">备选项</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <!-- <el-date-picker
            type="date"
          ></el-date-picker> -->
          <el-input
            placeholder="请选择日期"
            suffix-icon="el-icon-date"
            type="date"
            v-model="form.birthday">
          </el-input>
        </el-form-item>
        <el-form-item label="邮件" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="详情" :label-width="formLabelWidth">
          <el-input v-model="form.details" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "80px",
      form: {
        id: "",
        radio:1
      },
      user: "",
      pagination: {
        //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 10, //每页显示的记录数
        total: 0, //总记录数
        email: "",
        username: "",
        description: "",
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleCurrentChange() {},

    select() {
      console.log("--------------------------------");
      this.$http
        .get("http://localhost:8989/users/getUserNameOrEmail", this.form)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData);
        });
    },
    getAll() {
      this.$http.get("http://localhost:8989/users/getAll").then((res) => {
        this.tableData = res.data.data;
      });
    },

    insert() {
      this.dialogFormVisible = true;
    },
  },
  //钩子函数
  created() {
    this.getAll();
  },
};
</script>

<style scoped>
.second {
  margin-left: 50px;
  margin-top: 20px;
}

hr {
}
</style>
